<template>
  <div style="padding: 20px 50px">
    <el-form ref="ruleFormRef" label-position="top" :model="changePasswordForm" status-icon :rules="rules"
      label-width="120px" class="demo-ruleForm">

      <el-form-item label="修改密码" prop="password">
        <el-input v-model="changePasswordForm.password" type="password" placeholder="请输入密码" autocomplete="off"
          :prefix-icon="Lock" />
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPassword">
        <el-input v-model="changePasswordForm.checkPassword" type="password" placeholder="请确认密码" autocomplete="off"
          :prefix-icon="Lock" />
      </el-form-item>

      <el-form-item>
        <div class="submitBtn">
          <button @click.prevent="submitForm(ruleFormRef)">确认</button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script  lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

import { changePasswrod } from '@/utils/adminHttp'

import { Lock } from '@element-plus/icons-vue'


const ruleFormRef = ref<FormInstance>()


const changePasswordForm = reactive({
  password: '',
  checkPassword: ''
})


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    const reg = /^[\w+$]{6,12}$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('密码只能是6-12位的数字下划线和字母'))
    }
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请确认密码'))
  } else if (value !== changePasswordForm.password) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
})
// 修改密码提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      changePasswrod(changePasswordForm.password).then(res => {

        changePasswordForm.password = ''
        changePasswordForm.checkPassword = ''
        if (res.data.ok) {
          ElMessage({
            showClose: true,
            message: res.data.info,
            type: 'success',
          })
        } else {
          ElMessage.error(res.data.info)
        }
      }).catch(err => ElMessage.error('服务器错误你可以检查一下你的token'))

    } else {
      return false
    }
  })
}

</script>

<style lang="scss" scoped>
.submitBtn {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-end;

  button {
    background-color: #0050ec;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 20px;
    border-radius: 2em;
    cursor: pointer;
    transition: 0.1s ease;
    border-width: 0;
    box-shadow: 1px 5px 0 0 #0e285d;
  }

  button:hover {
    transform: translateY(-4px);
    box-shadow: 1px 9px 0 0 #0e285d;
  }

  button:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 0 0 #0e285d;
  }
}
</style>